<template>
    <div class="container">

        <div class="P_box">
            <div>
                <img class="avatar" :src="`${personalobject.url}`">
                {{personalobject.url}}

            </div>
            <el-form v-if="wo!=bieren">
                <el-form-item class="button">
                    <el-button type="primary" @click="sendMSG" round>发消息</el-button>
                    <el-button v-if="num==1" type="primary" @click="follow " round>加关注</el-button>
                    <el-button v-else type="danger" @click="delfollow " round>取消关注</el-button>

                </el-form-item>
            </el-form>
            <table class="table" >
                <p>昵称:{{personalobject.acName}}</p>
                <p>粉丝量:{{personalobject.asLocalNum}}</p>
                <p>电话号码:{{personalobject.tel}}</p>
                <p>电子邮箱:{{personalobject.mail}}</p>
                <p>个性签名:{{personalobject.personSignature}}</p>
            </table>

        </div>

    </div>
</template>

<script>
import axios from "axios";


export default {


    data() {
        return {
            personalobject:Object,
            wo: localStorage.getItem('userId'),
            bieren:localStorage.getItem('userpageId'),
            followinglist:[]

        }
    },
    computed: {
        // 使用计算属性来判断userId是否存在于followingList中
        num() {
            // 使用Array.prototype.some()来检查是否存在匹配的userId
            const exists = this.followinglist.some(user => user.localId ==localStorage.getItem('userpageId') );
            // 如果存在，则返回0；否则返回1
            return exists ? 0 : 1;
        }
    },
    methods:{

        fetchPersonMSG() {
            axios({
                url: "/api/user/UserDetailsById",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data:{
                    user_id:localStorage.getItem('userpageId')
                }
            })
                .then(response => {
                    console.log(response);
                    this.personalobject=response.data.data;
                    this.acName = response.data.data.acName;
                    this.asLocalNum=response.data.data.asLocalNum;
                    this.mail = response.data.data.mail;
                    this.tel = response.data.data.tel;
                    this.url = response.data.data.url;
                    this.person_signature = response.data.data;

                })
                .catch(error => {
                    console.error('Error ', error);
                })
            axios({
                url: "/api/focus/getLocal",
                method: 'post',
                headers:{
                    "HOSHINO_T_KK":localStorage.getItem("userToken"),
                },
            })
                .then(response => {
                    console.log(response.data);
                    this.followinglist = Array.isArray(response.data.data) ? response.data.data: [];
                })
                .catch(error => {
                    console.error('Error ', error);
                })
        },
        follow(){
            axios({
                url: "/api/focus/add",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data:{
                    local_id:localStorage.getItem('userpageId'),

                }
            })
                .then(response => {
                    console.log(response);
                    this.fetchPersonMSG();

                })

        },
        delfollow(){
            axios({
                url: "/api/focus/del",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data:{
                    local_id:localStorage.getItem('userpageId'),

                }
            })
                .then(response => {
                    console.log(response);
                    this.fetchPersonMSG();

                })

        },
        sendMSG(){
            axios({
                url: "/api/messageList/addList",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data:{
                    target_id:localStorage.getItem('userpageId'),


                }
            })
                .then(response => {
                    console.log(response);
                })
                .catch(error => {
                    console.error('Error ', error);
                })

        }
    },
    created(){
        // const userId = localStorage.getItem('userId');
        this.fetchPersonMSG();
    },
}


</script>

<style scoped>
.button{
    display: flex;
    justify-content: flex-end;
}
.table{
    padding-left: 35%;
    color: black;


}
.container{
    background-color: white;
    height: 100%;
    width: 90%;

}
.P_box{

    height: 60%;
    width: 80%;
    margin: auto;
    transform: translate(0,30%);

}
.avatar{

    display: block;
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;

    transform: translate(0,-30%);

}
</style>
